<template>
    <view class="page savepadding">
        <view class="filter-wrap">
            <view class="filter-item" @click="showModel=true">
				<view>
					<text>{{nowModel.dictValue||'车型'}}</text>
					<u-icon name="arrow-down" color="#999999" size="12"></u-icon>
				</view>
               
            </view>
            <view class="filter-item" @click="showBrand=true">
				<view>
					<text>{{nowBrand.carBrandName||'品牌'}}</text>
					<u-icon name="arrow-down" color="#999999" size="12"></u-icon>
				</view>   
            </view>
        </view>
        <view class="savepadding">
            <template v-if="list.length">
                <DirveCard v-for="(item, index) in list" :itemData="item" :key="index" @itemClick="itemClick(item)"></DirveCard>
                <u-loadmore :status="loading" @loadmore="loadmore"></u-loadmore>
            </template>
            <u-empty mode="list" marginTop="100" v-else />
        </view>
		<!-- 车型 -->
		<u-popup :show="showModel" mode="bottom" round="10" style="position: relative;">
			<view class='info-box'>
				<view class='title-box'>
					<view class='title-box-text'>车型</view>
					<view class="close-img-box" @click='showModel=false'>
						<image class="close-img" src="../../static/window_icon_close.png"></image>
					</view>
					
				</view>
				<view style='margin-bottom: 100upx;max-height: 400upx;overflow-y: auto;'>
					<view v-for="(item,index) in modelList" class='info-value' @click="modelClick(item)" :key='index'>
						<view class='info-value-text' style="font-size: 28upx;">{{item.dictValue}}</view>
						<view class='info-value-money' v-if="modelValue.dictValue==item.dictValue">
							<image class="ok-img" src="../../static/window_icon_right.png"></image>
						</view>
					</view>
				</view>
				
				<view class="bottom2" :class="isIos?'bottom3':''" @click='modelConfirm()'>确定</view>
			</view>
		</u-popup>
		 <!-- 品牌 -->
		<u-popup :show="showBrand" mode="bottom" round="10" style="position: relative;">
			<view class='info-box'>
				<view class='title-box'>
					<view class='title-box-text'>品牌</view>
					<view class="close-img-box" @click='showBrand=false'>
						<image class="close-img" src="../../static/window_icon_close.png"></image>
					</view>
					
				</view>
				<view style='margin-bottom: 100upx;max-height: 400upx;overflow-y: auto;'>
					<view v-for="(item,index) in brandList" class='info-value' @click="brandClick(item)" :key='index'>
						<view class='info-value-text' style="font-size: 28upx;">{{item.carBrandName}}</view>
						<view class='info-value-money' v-if="brandValue.carBrandName==item.carBrandName">
							<image class="ok-img" src="../../static/window_icon_right.png"></image>
						</view>
					</view>
				</view>
				
				<view class="bottom2" :class="isIos?'bottom3':''" @click='brandConfirm()'>确定</view>
			</view>
		</u-popup>
        <!-- 登录弹窗 -->
        <LoginMask></LoginMask>
    </view>
</template>

<script>
import DirveCard from '@/components/card/dirve-card.vue';
import * as HomeApi from '@/common/apis/home-api';
import LoginMask from '@/components/layout/login-mask.vue';

export default {
    components: {
        DirveCard,
        LoginMask,
    },
    data() {
        return {
            list: [], // 车辆列表
            pageNo: 1, // 页码
            bizType: 1, // 1.热门租车 2.以租代购 3.长租 4.金融分期 5.直购 6.试驾 7.选车
            schemeType: 0, // bizType为5，6必传 1.直购； bizType为2必传 2分期购车；bizType为3 必传3租赁； bizType为4必传 4.金融分期 还有一种情况是选择租赁方式传递
            showModel: false, // 显示车型选择器
			showBrand:false,
            modelList: [], // 车型列表
            brandList: [], // 品牌列表
            nowModel: {}, // 当前选择车型
            nowBrand: {}, // 当前选择品牌
            loading: 'loadmore',
			conditionTitle:'',
			conditionList:[],
			brandValue:{},
			modelValue:{},
			isIos:false,
			titleText:'',
        };
    },
    computed: {
        homeData() {
            return this.$store.state.home.homeData;
        },
        openid() {
            return this.$store.state.user.openid;
        },
        deptId() {
            return this.$store.state.user.deptId;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
    },
    async onLoad(op = {}) {
		
        // 动态设置当前页面的标题。
        if (op.title) {
            uni.setNavigationBarTitle({ title: op.title }); //'新的标题'
        }
		this.titleText = op.title
        this.bizType = op.bizType;
        this.schemeType = op.schemeType;
        this.list = await this.getList(); // 获取车辆列表
        await this.getConditionData(); // 获取车型,品牌
    },
	onShow(){
		const type = uni.getStorageSync('modelType')
		if(type=='iphone'){
			this.isIos = true
		}else{
			this.isIos = false
		}
	},
    methods: {
		modelClick(info){
			this.modelValue = info
		},
		brandClick(info){
			this.brandValue = info
		},
        /**
         * 获取车型,品牌
         */
        async getConditionData() {
            try {
				let schemeType = null
				if(this.titleText=='经租'){
					schemeType = 3
				}else if(this.titleText=='以租代购'){
					schemeType = 2
				}
                const result = await HomeApi.conditionnew({schemeType:schemeType});
                this.modelList =result.carModelTypeList // 车型列表
                this.brandList = [...[{ carBrandName: '全部' }],...result.carBrandList]; // 品牌列表
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 获取车辆列表
         */
        async getList() {
            const params = {
                pageNo: this.pageNo,
                bizType: this.bizType,
                cityCode:uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):'110000',
            };
            if (this.schemeType) {
                params.schemeType = this.schemeType; // bizType为5，6必传 1.直购； bizType为2必传 2分期购车；bizType为3 必传3租赁； bizType为4必传 4.金融分期 还有一种情况是选择租赁方式传递
            }
            if (this.nowModel.dictCode) {
                params.modelTypeSearchValue = this.nowModel.dictCode; // 车型id
            }
			console.log(this.nowBrand,'this.nowBrand')
            if (this.nowBrand.carBrandName) {
				if(this.nowBrand.carBrandName=='全部'){
					params.brandName = ''
				}else{
					params.brandName = this.nowBrand.carBrandName; // 品牌id
				}
            }
            try {
                const result = await HomeApi.scheme(params);
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
                return [];
            }
        },
        /**
         * 选择车型
         */
		modelConfirm(){
			this.nowModel = this.modelValue
			this.showModel = false
			this.reload(); // 重新获取列表
		},
		brandConfirm(){
			this.nowBrand = this.brandValue
			this.showBrand = false
			this.reload(); // 重新获取列表
		},
        /**
         * 查看车辆详情
         */
        itemClick(item) {
            uni.navigateTo({
                url: '/pages/car/cardetail/cardetail?bizType=' + this.bizType + "&schemeId=" + item.schemeId + "&subSchemeId=" + item.subSchemeId  + "&subSchemeRentId=" + item.subSchemeRentId +  "&cavanFlag=" + item.cavanFlag
            });
        },
        async reload() {
            this.pageNo = 1;
            this.list = await this.getList(); // 获取列表
            this.loading = 'loadmore';
        },
        /**
         * 加载更多
         */
        async loadmore() {
            this.loading = 'loading';
            this.pageNo++;
            const list = await this.getList();
            if (list?.length) {
                this.list = this.list.concat(list);
                this.loading = 'loadmore';
            } else {
                this.loading = 'nomore';
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.ok-img{
	width:32upx ;
	height: 32upx;
}
.info-value{
	display: flex;
	justify-content: space-between;
	padding:32upx;
	font-size: 24upx;
	color:#000000;
	height: 40upx;
}
.info-box{
		background-color:#F8F8F8 ;
		padding:32upx;
		
		.bottom2 {
			position:absolute;
			bottom: 30upx;
			width: 90%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: $redec;
			border-radius: 8upx;
			color:#ffffff;
			font-size: 32upx;
		}
		.bottom3{
			position:absolute;
			bottom: 70upx;
		}
		.title-box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32upx;
			.title-box-text{
				font-size:32upx ;
				font-weight: bold;
				color:#000000,
				
			}
			.close-img-box{
				width:34upx ;
				height:34upx;
				
				.close-img{
					width:32upx ;
					height:32upx;
				}
			}
			
		}
	}
.page {
    background: #f5f5f5;
    padding:0upx 32upx 32upx 32upx;

    .filter-wrap {
		width: 100%;
        margin-bottom: 24upx;
        display: flex;
        justify-content: space-between;
		background-color: #ffffff;
		height: 88upx;
		align-items: center;
    }

    .filter-item {
		width: 50%;
        display: flex;
		justify-content: center;
        view {
            display: flex;
			text{
				font-size: 28upx;
				color:#000000;
				margin-right:14upx ;
			}
        }
    }
}
</style>